<template>
	<view class="container-box">
		<view class="main-box">
			<!-- <view class="steps-box">
				<u-steps current="0">
					<u-steps-item title="基础信息"></u-steps-item>
					<u-steps-item title="从业信息"></u-steps-item>
					<u-steps-item title="补充信息"></u-steps-item>
				</u-steps>
			</view> -->
			<view class="news-main-box">
				<view class="form-list-box">
					<view class="form-list-title">
						<text class="form-prop-icon">*</text>
						<text class="form-title">头像</text>
					</view>
					<view class="head-img-box">
						<view class="head-img-list-box">
							<view class="img-box" @click="oneImage('img')">
								<image :src="formData.img" mode="aspectFill" class="head-img" v-if="formData.img">
								</image>
								<view class="img-icon" v-else>+</view>
							</view>
							<view class="img-tip-box">支持：png、jpg、jpeg<br />格式，大小不超过5M</view>
						</view>
						<image src="/static/icons/img_model.png" mode="heightFix" class="img-model"></image>
					</view>
				</view>
				<view class="form-list-box">
					<view class="form-list-title">
						<text class="form-prop-icon">*</text>
						<text class="form-title">姓名</text>
					</view>
					<view class="form-input-box">
						<input v-model="formData.realname" placeholder="请输入真实姓名" class="input-style" />
					</view>
				</view>
				<view class="form-list-box">
					<view class="form-list-title">
						<text class="form-prop-icon">*</text>
						<text class="form-title">联系电话</text>
					</view>
					<view class="form-input-box">
						<input v-model="formData.phone" placeholder="请输入联系电话" class="input-style" />
					</view>
				</view>
				<view class="form-list-box">
					<view class="form-list-title">
						<!-- <text class="form-prop-icon">*</text> -->
						<text class="form-title">邮箱</text>
					</view>
					<view class="form-input-box">
						<input v-model="formData.email" placeholder="请输入邮箱地址" class="input-style" />
					</view>
				</view>
				<view class="form-list-box">
					<view class="form-list-title">
						<text class="form-prop-icon">*</text>
						<text class="form-title">性别</text>
					</view>
					<view class="form-radio-list-box">
						<view class="form-radio-list" :class="{'form-radio-active':formData.gender == 1}"
							@click="changeRadio(1)">
							<view class="form-radio-box">
								<u-icon name="checkbox-mark" color="#fff" size="14"
									v-if="formData.gender == 1"></u-icon>
							</view>
							<view class="form-radio-text">男</view>
						</view>
						<view class="form-radio-list" :class="{'form-radio-active':formData.gender == 2}"
							@click="changeRadio(2)">
							<view class="form-radio-box">
								<u-icon name="checkbox-mark" color="#fff" size="14"
									v-if="formData.gender == 2"></u-icon>
							</view>
							<view class="form-radio-text">女</view>
						</view>
					</view>
				</view>
				<view class="form-list-box">
					<view class="form-list-title">
						<text class="form-prop-icon">*</text>
						<text class="form-title">身份证号</text>
					</view>
					<view class="form-input-box">
						<input v-model="formData.code" placeholder="请输入身份证号" class="input-style" />
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="btn" @click="jump('/promotionpages/form/expert1')">下一步</view>
		</view>
	</view>
</template>

<script>
	import {
		CommonUpload
	} from '@/utils/Oss.js'
	export default {
		onLoad() {
			this.hasFormData()
		},
		data() {
			return {
				formData: {
					"img": "",
					"realname": "",
					"phone": "",
					"email": "",
					"gender": '',
					"code": "",
					"enterprise_id": '',
					"position": "",
					"auth_type_id": '',
					"good_at": "",
					"desc": "",
					"honor": ""
				},
				flag: true
			}
		},
		methods: {
			oneImage(name) {
				CommonUpload().then(res => {
					this.formData[name] = res;
				})
			},
			hasFormData() {
				this.$func.request('/user/expert').then(res => {
					if (res.data.data.id) {
						this.formData = res.data.data
					}
				})
			},

			jump(url) {
				this.flag = true;

				if (this.formData.img == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					});
					this.flag = false;
					return false;
				}

				if (this.formData.realname == '') {
					uni.showToast({
						title: '请输入真是姓名',
						icon: 'none'
					});
					this.flag = false;
					return false;
				}

				if (this.formData.phone == '') {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none'
					});
					this.flag = false;
					return false;
				}

				var pattern = new RegExp("^1[3456789][0-9]{9}$", 'i');
				if (!pattern.test(this.formData.phone)) {
					uni.showToast({
						title: '请输入正确的联系方式',
						icon: 'none'
					})
					this.flag = false;
					return false;
				}

				if (this.formData.code == '') {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none'
					});
					this.flag = false;
					return false;
				}

				if (this.flag) {
					this.flag = false;
					uni.navigateTo({
						url: url + "?formData=" + JSON.stringify(this.formData),
						fail: (error) => {
							this.flag = true;
						}
					})
				}


			},
			changeRadio(num) {
				this.formData.gender = num;
			}
		}

	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}

	.container-box {
		background: #f4f8fd;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		height: 100vh;
	}

	.main-box {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}



	.news-main-box {
		overflow: auto;
		height: 100%;
		padding: 0 40rpx 40rpx;
		box-sizing: border-box;
		background: #f4f8fd;
	}

	.form-list-box {
		margin-top: 50rpx;
	}

	.form-list-title {
		font-size: 32rpx;
		color: #3d3d3d;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.form-prop-icon {
		color: #FF5908;
	}

	.head-img-box {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.head-img {
		vertical-align: top;
		max-width: 100%;
		height: 100%;
	}

	.head-img-list-box {
		display: flex;
		align-items: flex-end;
	}

	.img-box {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #ECF3FF;
		border-radius: 10rpx;
		overflow: hidden;
		width: 160rpx;
		height: 160rpx;
	}

	.img-icon {
		font-size: 80rpx;
		color: #D8D8D8;
		font-weight: bold;
	}

	.img-tip-box {
		font-size: 24rpx;
		color: #8D8C8C;
		margin-left: 20rpx;
	}

	.img-model {
		width: 120rpx;
		height: 120rpx;
		vertical-align: top;
	}

	.input-style {
		background: #ECF3FF;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.textarea-style {
		background: #ECF3FF;
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.form-radio-list-box {
		display: flex;
		align-items: center;
	}

	.form-radio-list {
		display: flex;
		margin-right: 60rpx;
	}

	.form-radio-box {
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		border: 4rpx solid #D8D8D8;
		background-color: #fff;
		height: 30rpx;
		width: 30rpx;
		margin-right: 10rpx;
		align-items: center;
	}

	.form-radio-active .form-radio-box {
		border-color: #3887FE;
		background-color: #3887FE;
	}

	.form-radio-text {
		color: #8D8C8C;
		font-size: 28rpx;
	}

	.form-radio-active .form-radio-text {
		color: #3887FE;
	}

	.btn-box {
		background-color: #fff;
		padding: 30rpx;
		box-sizing: border-box;
		box-shadow: rgba(0, 0, 0, .3) 0rpx 0rpx 10rpx 0rpx;
		position: relative;
	}

	.btn {
		color: #fff;
		font-size: 32rpx;
		background-color: #155DFF;
		border-radius: 10rpx;
		text-align: center;
		padding: 20rpx 0;
	}

	.form-select-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ECF3FF;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.select-no-value {
		color: #8D8C8C;
	}

	.form-label-box {
		display: flex;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.label-input {
		flex: 1;
		padding: 30rpx;
		background: #ECF3FF;
	}

	.label-add-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #fff;
		background-color: #3887FE;
		padding: 0 40rpx;
	}

	.label-box {
		display: flex;
		flex-wrap: wrap;
	}

	.lable-list {
		background-color: #F9F0DD;
		color: #FCA82E;
		font-size: 28rpx;
		margin: 20rpx 10rpx 0 0;
	}

	.steps-box {
		border-top: 30rpx solid #3887FE;
		background: #fff;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>